<template>
  <el-row class="boxrow">
    <el-col :span="20">
      <i class="el-icon-s-home myicon"></i>
      <span class="fw">{{ item.name }}</span>
    </el-col>
    <el-col :span="4">
      <el-row class="myrow">
        <el-col>{{ item.manager }}</el-col>
        <el-col>
          <el-dropdown @command="handleCommand">
            <span class="el-dropdown-link">
              操作<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item command="add">添加子部门</el-dropdown-item>
              <el-dropdown-item command="check" v-if="!item.isTop"
                >查看部门</el-dropdown-item
              >
              <el-dropdown-item command="del" v-if="!item.isTop"
                >删除部门</el-dropdown-item
              >
            </el-dropdown-menu>
          </el-dropdown>
        </el-col>
      </el-row>
    </el-col>
  </el-row>
</template>

<script>
// 导入删除组织结构的方法
import { delDepartmentApi } from '@/api/departments'
export default {
  // 提示传入的对象
  props: ['item'],
  methods: {
    async handleCommand (command) {
      switch (command) {
        case 'add':
          // 打开新增面板（由于新增面板在父组件中，
          // 这个按钮在子组件中为了解决这个问题，让子组件调用父组件的方法）
          this.$emit('open-add', this.item)
          console.log('完成新增')
          break
        case 'check':
          this.$emit('open-edit', this.item)

          console.log('完成查看')
          break
        case 'del':
          try {
            // 完成删除功能
            await this.$confirm('是否删除当前部门?', '提示', {
              confirmButtonText: '确定',
              cancelButtonText: '取消',
              type: 'warning'
            })
            // 请求删除接口
            await delDepartmentApi(this.item.id)
            // 更新部门数据 （在父组件中更新 在子组件中调用父组件中的方法）
            this.$emit('refreshdata')
            // 添加提示信息
            this.$message('删除部门成功')
          } catch {
            console.log('取消')
          }
          break
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.boxrow {
  width: 100%;
  font-size: 14px;
  .myicon {
    margin-right: 6px;
  }
  .fw {
    font-weight: 700;
  }
  .myrow {
    display: flex;
    ::v-deep .el-col {
      text-align: right;
    }
  }
}
</style>
